<template>
  <router-view v-slot="{ Component, route }">
    <Transition name="slide">
      <keep-alive :include="pageStore.needKeepAlive">
        <component class="child-view" :is="Component" :key="route.fullPath" />
      </keep-alive>
    </Transition>
  </router-view>
</template>

<script setup lang="ts">
const pageStore = usePageStore()
</script>

<style>
body {
  -webkit-font-smoothing: antialiased;
}
#app {
  max-width: 720px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.child-view {
  width: 100%;
  height: 100vh;
  background-color: #f6f6f6;
  transition: all 0.5s ease-in-out;
}
.rightin-enter,
.leftin-leave-active {
  opacity: 0;
  z-index: 9999;
  transform-origin: top left;
  transform: rotateY(90deg) skewY(-10deg) translateX(-15%) translateY(-10%);
}
.leftin-enter,
.rightin-leave-active {
  opacity: 0;
  z-index: 9999;
  transform-origin: top right;
  transform: rotateY(-90deg) skewY(-10deg) translateX(15%) translateY(10%);
}

.slide-enter-from {
  transform: translateX(100%);
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-leave-to {
  transform: translateX(-100%);
}

</style>
